<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/pintuer.css">
    <link rel="stylesheet" href="/css/admin.css">
    <!-- 引入Bootstrap默认样式 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript"
            src="js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>

    <style type="text/css">
        .red {
            background-color: lightgreen;
        }

        .green {
            background-color: darksalmon;
        }
    </style>
</head>
<body style="margin: 0px;background-repeat:no-repeat;
            background-attachment: fixed;
            background-origin: border-box;
            background-size:cover;
		">
<div id="admission" style="margin-top:-12px;">
    <ol class="breadcrumb" ></ol>
    <div>
        <span style="margin: 50px 45%;font-size: 30px" >材料清单表</span>
    </div><br>
    <div class="padding border-bottom">
  <ul class="search">
   <li>
       <div class="form-inline row">
            <label>　　　工程阶段：</label>

        <select class="input" id="materialOperationNum" @change="changeNum()"
                style="width: 200px; line-height: 17px;">

            <option value="0">全部</option>
            <option value="1">第一阶段</option>
            <option value="2">第二阶段</option>
            <option value="3">第三阶段</option>
            <option value="4">第四阶段</option>
            <option value="5">第五阶段</option>
        </select>
       </div>
   </li>
    </ul>
    </div>
    <div>
        <table class="table table-hover">
            <tr>
                <td>编号</td>
                <td>材料id</td>
                <td>材料名称</td>
                <td>材料型号</td>
                <td>材料价格</td>
                <td>材料数量</td>
                <td>图片</td>
                <td>供应商</td>
                <td>阶段</td>
            </tr>
            <tbody>
            <tr v-for="(li,index) in list" >
                <td v-text="index+1"></td>
                <td v-text="li.materialId"></td>
                <td v-text="li.materialName"></td>
                <td v-text="li.materialModel"></td>
                <td v-text="li.materialPrice"></td>
                <td ><input type="number" min="0"  onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] :''" v-model="li.materialListNum" ></td>
                <td><img :src="li.materialImgUrl" width="50px" height="50px"></td>
                <td v-text="li.materialSupplier"></td>
                <td v-text="li.materialOperationNum"></td>
            </tr>
            </tbody>
        </table>
        <div class="field" align="center">
            <button class="button bg-main icon-check-square-o" type="button"@click="addadmission()">
                提交
            </button>

        </div>
    </div>
</div>
</div>
<script type="text/javascript">
    /*思路，通过传进来的材料id寻找当前需要的材料，根据查询到的材料填写数量，随后将项目id一同带入*/
    /*取到传过来的参数*/
    /*  var searchURL = window.location.search;
      searchURL = searchURL.substring(1, searchURL.length);
      var targetPageId = searchURL.split("&")[0].split("=")[1];
      var targetPageId = searchURL.split("&")[1].split("=")[1];*/
    var app = new Vue({
        el: '#admission',
        data: {
            list:[],
            /*通过阶段id查找阶段*/
            onedecMaterialLists:{
                materialId:0,
                materialListNum:0,
                materialListTotal:0,
                operationNum:0,
                materialListStatus:0,
                materialListBak1:'',
                materialListBak2:'',
                materialListBak3:''
            },
            onedecMaterialLists:[],
        },
        created: function () {
            this.select1();
        },
        methods: {
            changeNum:function(){
                var _this = this;
                var num=$("#materialOperationNum").val();
                $.ajax({
                    type: "get",
                    url: "materials/selectByNum",
                    data:{materialOperationNum:num},
                    dataType: 'json',
                    success: function (data) {
                        _this.list =data.list;

                    },
                    error: function (data) {
                        alert(data.message);
                    }
                });
            },
            /*通过阶段id查找阶段*/
            select1: function () {
                var _this = this;
                $.ajax({
                    type: "get",
                    url: "materials/selectAll",
                    dataType: 'json',
                    success: function (data) {
                        _this.list =data.list;

                    },
                    error: function (data) {
                        alert(data.message);
                    }
                });
            },
            /*
            添加
             */
            addadmission: function () {
                var map = new Map();
                var _this = this;
            for(let i=0;i<_this.list.length;i++){
             if(_this.list[i].materialListNum>0){
                map.set(_this.list[i].materialId,_this.list[i].materialListNum);

             }

            }
            let obj=Object.create(null);
            for(let[k,v] of map){
                obj[k]=v;
            }

            $.ajax({
                    type: "post",
                    url: "materials/insertAll",
                    dataType: 'json',
                contentType:'application/json;charset=utf-8',
                    data:JSON.stringify(obj),
                    success: function (data) {
                     alert("添加成功");
                     location.reload();
                    },
                    error: function (data) {
alert("添加失败");
                    }
                });
            }

        }
    });
</script>
</body>
</html>